import style from './login.module.scss'
import { Button, Form, Input, message } from 'antd';
import { loginApi } from '@/api/requestApi'
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const [form]  = Form.useForm()
  const navigate = useNavigate()
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const onFinish = async (values: any) => {
    console.log('Success:', values);
    const res = await loginApi(values)
    console.log(res)
    if(res.status === 200){
      message.success('登录成功！');
      setTimeout(() => {
        navigate('/home');
      }, 1000); // 留出显示时间
      localStorage.setItem('token',res.data.token)
    } else {
      message.error('账号或密码错误')
    }
  };
  return (
    <>
      <div className={style.container}>
        <div className={style.content}>
          <h2>文章发布管理后台</h2>
        <Form
      labelCol={{
        span: 4,
      }}
      wrapperCol={{
        span: 18,
      }}
      initialValues={{
        account:'',
        password:''
      }}
      form={form}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item
        label="账号"
        name="account"
        rules={[
          {
            required: true,
            message: '请输入账号',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType='submit'>
          登录
        </Button>
        <Button onClick={()=>{
          form.resetFields()
        }}>
          取消
        </Button>
      </Form.Item>
    </Form>
        </div>
      </div>
    </>
  )
}
